<template>
  <div class="modifadd">
    <header>
      <van-nav-bar
        title="修改个人信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </header>
    <section>
      <van-cell-group>
        <van-field v-model="infoList.name" label="姓名" placeholder="收货人姓名" />
        <van-field v-model="infoList.tel" label="电话" placeholder="收货人手机号" />
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="详细地址"
          :placeholder="infoList.address"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地址"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <van-field v-model="value" label="邮编" placeholder="邮政编码" />
        <van-cell title="设置为默认收货地址">
          <template #default>
            <van-switch v-model="infoList.isDefault" />
          </template>
        </van-cell>
      </van-cell-group>
      <div class="btn">
        <van-button round type="info" size="large" class="info-btn">保存</van-button>
        <van-button round type="danger" size="large">删除</van-button>
      </div>
    </section>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  beforeMount() {
    console.log(this.$route.params.list);
    this.infoList =this.$route.params.list
  },
  data() {
    return {
      value: "",
      infoList:{},
       show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
    padding: 10px 16px;
    .info-btn {
        margin: 10px 0;
    }
}
</style>